<template>
  <div class="ms-entry">
    <div class="title" @click="handleMsEntry">
      <h2>限时秒杀</h2>
      <div class="time">
        <span>{{tab_time}}点场</span>
        <i>
          <van-count-down :time="time" />
        </i>
      </div>
      <em>
        更多
        <van-icon name="arrow" />
      </em>
    </div>

    <ul class="ms-entry-list">
      <li>
        <img
          src="https://img07.miyabaobei.com/d1/p6/2019/09/06/cf/90/cf900e5ae9b27b8a43915684f4b3f2aa619566700.jpg@base@tag=imgScale&w=800&q=90"
          alt
        />
        <i>￥54.9</i>
        <span>￥169</span>
      </li>
      <li>
        <img
          src="https://img07.miyabaobei.com/d1/p6/2019/09/06/cf/90/cf900e5ae9b27b8a43915684f4b3f2aa619566700.jpg@base@tag=imgScale&w=800&q=90"
          alt
        />
        <i>￥54.9</i>
        <span>￥169</span>
      </li>
      <li>
        <img
          src="https://img07.miyabaobei.com/d1/p6/2019/09/06/cf/90/cf900e5ae9b27b8a43915684f4b3f2aa619566700.jpg@base@tag=imgScale&w=800&q=90"
          alt
        />
        <i>￥54.9</i>
        <span>￥169</span>
      </li>
      <li>
        <img
          src="https://img07.miyabaobei.com/d1/p6/2019/09/06/cf/90/cf900e5ae9b27b8a43915684f4b3f2aa619566700.jpg@base@tag=imgScale&w=800&q=90"
          alt
        />
        <i>￥54.9</i>
        <span>￥169</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { get } from "utils/http";

export default {
  data() {
    return {
      tab_time: null,
      time: "0"
    };
  },

  methods: {
    async handleMsEntry() {
      this.$router.push({ path: `/MsEntry/${this.pid[0].pid}` });
    }
  },
  async created() {
    let pid = await get({
      url: "/instant/seckill/seckillPromotionInfo/1",
      params: {
        token: ""
      }
    });

    this.pid = pid;
    this.tab_time = pid[0].tab_time.split(":")[0];
    let date = new Date();
    let s_time =
      pid[0].start_time.split(" ")[0] +
      " " +
      date.toLocaleString("chinese", { hour12: false }).split(" ")[1];
    let end_time = Date.parse(pid[1].start_time);
    let start_time = Date.parse(s_time);
    let rest_time = end_time - start_time;
    this.time = rest_time;
  }
};
</script>

<style lang="stylus" scoped>
.ms-entry {
  display: flex;
  flex-direction: column;

  // width: 100%;
  .title {
    display: flex;
    height: 0.3rem;
    margin: 5px 20px;

    h2 {
      font-size: 0.18rem;
    }

    .time {
      font-size: 0.12rem;
      line-height: 0.26rem;
      height: 0.26rem;

      span {
        display: inline-block;
        height: 0.17rem;
        line-height: 0.17rem;
        width: 0.6rem;
        transform: translate(14px, 0px);
        border-radius: 50px;
        background: #ea4141;
        color: #fff;
        text-align: center;
      }

      i {
        color: #ea4141;
        height: 0.17rem;
        width: 0.7rem;
        text-align: center;
        text-indent: 0.12rem;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        line-height: 0.17rem;
        border-top: 1px solid #ea4141;
        border-bottom: 1px solid #ea4141;
        border-right: 1px solid #ea4141;
        display: inline-block;

        div {
          color: #ea4141;
          font-size: 12px;
          line-height: 0.15rem;
        }
      }
    }

    em {
      flex: 2;
      text-align: right;
      font-size: 0.12rem;
      line-height: 0.24rem;
    }
  }

  .ms-entry-list {
    height: 100%;
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    background: linear-gradient(to bottom, #fcf9fa 0%, #fff3f3 100%);

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.12rem;

      i {
        color: #e33e33;
      }

      b {
        color: #e33e33;
      }

      img {
        transform: scale(0.8);
        width: 100%;
        border: none;
        vertical-align: top;
      }
    }
  }
}
</style>